{include file="common/header"}
<script>
        $('#example-navbar-collapse>ul>li').removeClass('active')
        $($('#example-navbar-collapse>ul>li')[1]).addClass('active')
    </script>
<style>
    .form-group {
        float: unset!important;
        margin-left: auto;
        margin-right: auto;
    }

    form {
        float: unset!important;
        margin-left: auto!important;
        margin-right: auto!important;
    }

    #main-block {
        display: flex;
        justify-content: space-between;
        margin-top: 80px;
    }
</style>
<div id="main-block">
    <div class="container">

        <div class="container col-md-3" id="left-menu">
            <div id="sidebar" class="span3">
                <div class="sidebar-nav well">
                    <ul class="nav nav-list">
                        <li class="nav-header">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">类型选择</font>
                            </font>
                        </li>
                        <li v-for="(li,i) in items" :class="{active: hasSelect(i)}">

                            <a href="javascript:;" @click.self.prevent="onSelect(i)">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;"> {{ li.name }}</font>
                                </font>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <script>
            var left_menu = new Vue({
                el: '#left-menu',
                data: {
                    items: [],
                    selected: 0
                }, created: function () {
                    $.getJSON('/GQT/public/index/apply/getProList', function (data) {

                        left_menu.items = data

                        for (let i = 1; i < left_menu.items.length; i++) {
                            left_menu.items[i].isSelect = false
                        }
                        left_menu.items[0].isSelect = true
                        proList.pro = left_menu.items[0].id

                    })

                }, methods: {
                    onSelect: function (e) {
                        this.selected = e
                        proList.pro = left_menu.items[e].id
                        proList.unsel = true
                        appFrom.isTrue = false


                    },
                    hasSelect(val) {
                        if (val === this.selected) {
                            return true;
                        }
                        return false;
                    }
                }

            })
        </script>

        <style>
            .active a {
                color: white;
            }
        </style>


        <div id="pro-list" class="list-group col-md-9" v-show="unsel">
            <a href="#" class="list-group-item active">
                队伍名称
            </a>
            <a href="#" class="list-group-item" v-for="i in items" @click="selectTeam(i)">
                <span class="badge">{{i.number}}</span>
                <span class="badge">{{i.NowNum}}</span>
                {{i.name}}
            </a>
        </div>
        <script>
            var proList = new Vue({
                el: '#pro-list',
                data: {
                    items: '',
                    pro: '',
                    unsel: true,
                }, created: function () {


                },
                watch: {
                    pro: function () {
                        $.getJSON('/GQT/public/index/apply/getProjectList', { class_id: left_menu.items[left_menu.selected].id }, function (data) {
                            proList.items = data
                            console.log(data)
                        })
                    }
                },
                methods: {
                    selectTeam: function (i) {
                        appFrom.value.item_id = i.s_apply_id
                        this.unsel = false
                        appFrom.isTrue = true
                        appFrom.itemName = i.name
                        console.log(i.name)
                    }
                }
            })
        </script>



        <div id="app-form" class="col-md-9" v-show="isTrue">

            <form class="form-inline" @submit.prevent="submit">
                <center>
                    <h2>{{itemName}}</h2>
                </center>
                <div class="region">
                    <span>
                        <strong>申请人信息:</strong>
                    </span>
                    <div class="region-in">
                        <div class="form-group">
                            <label for="exampleInputPassword1">姓&nbsp;名:</label>
                            <input type="text" class="form-control" placeholder="165042120" v-model="value.stu_name">
                        </div>

                        <div class="form-group">
                            <label for="exampleInputPassword1">学&nbsp;号:</label>
                            <input type="text" class="form-control" placeholder="165042120" v-model="value.stu_id">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">电&nbsp;话:</label>
                            <input type="text" class="form-control" placeholder="165042120" v-model="value.stu_phone">
                        </div>

                        <div class="form-group">
                            <label for="exampleInputPassword1">银行卡号:</label>
                            <input type="text" class="form-control" id="number_1" placeholder="165042120" v-model="value.stu_credit">
                        </div>

                    </div>
                </div>
                <div class="form-group">
                    <button class="btn btn-default" type="button" @click="reShow">返回</button>
                    <input type="submit" class="btn btn-default" value="提交">
                </div>
            </form>


        </div>
        <script>
            var appFrom = new Vue({
                el: '#app-form',
                data: {
                    items: '',
                    itemName: '',
                    value: {
                        item_id: '',
                        stu_name: '',
                        stu_id: '',
                        stu_phone: '',
                        stu_credit: '',

                    },
                    isTrue: false,

                },
                created: function () {

                },
                watch: {

                    items: function () {

                    }
                },
                methods: {
                    submit: function () {


                        if (this.value.stu_name == '') {
                            alert("请输入申请人姓名")
                            return;
                        }

                        if (this.value.stu_id == '') {
                            alert("请输入申请人学号")
                            return;
                        }


                        if (this.value.stu_phone == '') {
                            alert("请输入申请人手机号")
                            return;
                        }
                        if (this.value.stu_credit == '') {
                            alert("请输入申请人银行卡号")
                            return;
                        }



                        $.post('/GQT/public/index/apply/addNumber',
                            {
                                s_apply_id: this.value.item_id,
                                stu_name: this.value.stu_name,
                                stu_id: this.value.stu_id,
                                stu_phone: this.value.stu_phone,
                                stu_credit: this.value.stu_credit,

                            }, function (data) {
                                if (data == 1) {
                                    alert(data)
                                } else {
                                    alert(data)
                                }

                            }).error(function () {
                                alert("申请失败,请检查信息是否正确")
                            })

                    }, reShow: function () {
                        this.isTrue = false
                        proList.unsel = true
                    }
                }
            })

        </script>
        <style>
            #app-form form .form-group select {
                width: 25%;
                display: inline;
                margin: 0 20px;

            }

            .region {
                border: 1px #bbb solid;
                padding: 5% 7%;


            }

            .region-in {
                margin: 0 5%;

            }

            .form-inline .form-group {
                width: 49%;
                margin: 5px 2px;
            }

            .form-inline .form-group label {
                width: 61px;
            }

            .form-inline #apply-reason {
                width: 100%;
            }

            .form-inline #apply-reason textarea {
                width: 100%;
            }
        </style>

    </div>

</div>
{include file="common/footer"}